// 获取操作对象
var enlar = document.querySelector('.enlarge');
var cont = document.querySelector('.content');

// 获取url地址栏中的参数
var search = location.search
// 获取当前账号
var name1 = getCookie('name')
// 存放当前商品信息的对象
var o1
// 判断当前search是否有值
if(search) {
    // 获取当前参数值
    var id = search.split('=')[1];
    // 使用async和await去服务端获取当前id所对应的数据
    (async function(){
        var txt = await PromiseAjax({
            url: "./php/details.php",
            data: "uid="+id
        })
        // console.log(txt);
        // 把当前字符串转为对象
        o1 = eval('('+txt+')')
        // 创建字符串，存放需要渲染的内容
        var str = `
            <div class="fdj">
                <div class="middle">
                    <img src="${o1.img}" alt="">
                    <div class="mask"></div>
            
                    <div class="big">
                        <img src="${o1.img}" alt="">
                    </div>
                </div>

                <div class="small">
                    <img class="active" src="${o1.img}" alt="">
                    <img src="${o1.img}" alt="">
                    <img src="${o1.img}" alt="">
                </div>

                <!-- 信息介绍 -->
                <div class="product">

                    <div class="pti">
                        <h1>${o1.title}</h1>
                        <p>秒杀拼团仅限自提</p>
                    </div>
                    <div class="picture">
                        <div class="scj">
                            <span>市场价</span>
                            <span>￥${o1.mlpri}</span>
                        </div>

                        <div class="lshou">
                            <span>1919售价</span>
                            <div class="yhj">
                                <span>￥</span>
                                <em class="bs">${o1.price}</em>
                                <i>超级优惠</i>
                            </div>
                        </div>
                    </div>
                    <!-- 加入购物车 -->
                    <div class="shopping">
                        <!-- 数量 -->
                        <div class="shul">
                            <ul>
                                <li>
                                    <span>数量</span>
                                </li>
                                <li>
                                    <button>-</button>
                                    <button>1</button>
                                    <button>+</button>
                                </li>
                                <li>
                                    <span><em>1</em>件起售，每人限购<em>5</em>件</span>
                                </li>
                            </ul>
                        </div>
                    <div class="gwc">
                        <ul>
                            <li>
                                <a href="./cart.html">
                                    <button>立即购买</button>
                                </a>
                            </li>
                            <li>
                                <button>加入购物车</button>
                            </li>
                        </ul>
                    </div>
                    </div>
                    <!-- 二维码 -->
                    <div class="vxm">
                        <p>请用微信扫描二维码购买</p>
                        <img src="./image/下载.png" alt="">
                    </div>
                </div>
        </div>
        `

        // 把拼接好的内容渲染到放大镜盒子中
        enlar.innerHTML = str

        //获取操作对象
        var fdjBox = document.querySelector('.fdj');
        var middleBox = document.querySelector('.middle');
        var middleImg = document.querySelector('.middle>img')
        var mask= document.querySelector('.mask');
        var bigBox = document.querySelector('.middle .big');
        var bigImg = document.querySelector('.middle .big>img');
        var smallImgs = document.querySelectorAll('.small img');

        //给middle盒子绑定事件
        middleBox.onmouseover = function() {
            // console.log('鼠标移入成功');
            mask.style.display = 'block';
            bigBox.style.display = 'block';
        }
        //给middle盒子解绑事件
        middleBox.onmouseout = function() {
            // console.log('鼠标已移出');
            mask.style.display = 'none'
            bigBox.style.display = 'none'
        }

        //获取鼠标移动的位置
        middleBox.onmousemove = function() {
            //兼容写法
            var e = e || window.event
            //计算蒙板层的位置
            var l = e.pageX - fdjBox.offsetLeft - parseInt(mask.offsetWidth/2)-parseInt(getComputedStyle(middleBox)['border-left-width'])
            var t = e.pageY - fdjBox.offsetTop - parseInt(mask.offsetHeight/2)- parseInt(getComputedStyle(middleBox)['border-top-width'])
            // console.log(l,t);    
            //设置边界
            var x = middleBox.offsetWidth - mask.offsetWidth
            var y = middleBox.offsetHeight - mask.offsetHeight
            // console.log(x,y);
            //图片移动距离
            var imgX,imgY

            if(l <= 0) {
                imgX = 0
                mask.style.left = '0px'
            } else if(l >= x) {
                imgX = x
                mask.style.left = x + 'px'
            } else {
                imgX = l
                mask.style.left = l + 'px'
            }

            if(t <= 0) {
                imgY = 0
                mask.style.top = '0px'
            } else if(t >= x) {
                imgY = x
            mask.style.top = y + 'px' 
            } else {
                imgY = t
                mask.style.top = t + 'px'
            }

            bigImg.style.left = -2*imgX + 'px'
            bigImg.style.top = -2*imgY + 'px'


            //小图切换
            for(let i=0;i<smallImgs.length;i++) {
                //给所有小图片添加点击事件
                smallImgs[i].onclick = function() {
                //切换小图样式
                    for(let j=0;j<smallImgs.length;j++) {
                        smallImgs[j].className = ''
                    }
                    
                    smallImgs[i].className = 'active'
                
                    middleImg.src = bigImg.src = smallImgs[i].src

                }
            }
        }

    })()
} else {
    location='../list.html'
}


// 给放大镜盒子对象绑定点击事件
enlar.onclick = function(e) {
    // 事件对象兼容
    var e = e || e.window.event
    // 获取操作目标
    var tg = e.target || e.srcElement
    // 判断当前点击的按钮是否为“加入购物车”
    if(tg.innerHTML == "加入购物车") {
        if(name1) {
            // 获取该账号在localStorage中存储的商品信息
            var lists = localStorage.getItem(name1) || "[]"
            // 把当前获取的内容，转为数组对象
            lists = eval('('+lists+')')
            // 判断当前数组中是否有元素
            if(lists.length>0) {
                // 设置开关判断，true表示该商品存在，false表示不存在
                var bool = false
                //遍历数组元素
                lists.forEach(item=>{
                    // 判断数组中的商品id是否等于当前添加的商品id
                    if(o1.id == item.id) {
                        // 直接修改当前商品数量
                        item.cart_num++
                        bool = true
                    }
                })
                console.log(lists);

                if(bool) {
                    // 把当前数组存放到localStorage中
                    localStorage.setItem(name1,JSON.stringify(lists)) 
                } else {
                    // 修改当前商品的数量
                    o1['cart_num'] = 1
                    // 直接把当前要添加的商品存放到数组中
                    lists.push(o1)
                    // 把当前数组存放到localStorage中
                    localStorage.setItem(name1,JSON.stringify(lists))
                }
            } else {
                // 修改当前商品的数量
                o1['cart_num'] = 1
                // 直接把当前要添加的商品存放到数组中
                lists.push(o1)
                // 把当前数组存放到localStorage中
                localStorage.setItem(name1,JSON.stringify(lists))
            }
        } else {
            alert("请登录")
            // 获取当前url
            var url = location.href
            // 跳转到登录页
            location="./login.html?url2="+url
        }
    }
}